<template>
  <div class="app-container flex-row">
    <!-- 左侧树 -->
    <div class="conmmon-container-left scroll__y__content scrollbar-no-width" style="width:340px">
      <div class="common-title">
        <h2>键值</h2>
      </div>
      <el-input v-model="searchValue" placeholder="请输入键值进行搜索" style="margin: 10px 0;" />
      <el-tree
        ref="keyTree"
        v-loading="treeLoading"
        :data="redisKeys"
        :props="defaultTreeProps"
        default-expand-all
        :filter-node-method="onTreeFilter"
        class="common-el-tree scrollbar-no-width"
        @node-click="handleNodeClick">
        <span slot-scope="{ node }" class="custom-tree-node">

          <span class="text">
            <template v-if="node.data.type">
              <span v-if="node.data.type==='string'" class="color-primary">{{ node.data.type }}</span>
              <span v-if="node.data.type==='hash'" class="color-success">{{ node.data.type }}</span>
              <span v-if="node.data.type==='list'" class="color-danger">{{ node.data.type }}</span>
              <span v-if="node.data.type==='set'" class="color-warning">{{ node.data.type }}</span>
              <span v-if="node.data.type==='zset'" class="color-warning">{{ node.data.type }}</span>
              <span v-if="node.data.type==='none'" class="color-default">{{ node.data.type }}</span>
            </template>
            {{ node.label }}
          </span>
        </span>
      </el-tree>

    </div>
    <div v-if="currentRedisKey.key" class="conmmon-container-main flex-main">
      <div class="filter-container" style="padding-bottom:10px">
        <span v-if="currentRedisKey.type==='string'" class="color-primary">{{ currentRedisKey.type }}</span>
        <span v-if="currentRedisKey.type==='hash'" class="color-success">{{ currentRedisKey.type }}</span>
        <span v-if="currentRedisKey.type==='list'" class="color-danger">{{ currentRedisKey.type }}</span>
        <span v-if="currentRedisKey.type==='set'" class="color-warning">{{ currentRedisKey.type }}</span>
        <span v-if="currentRedisKey.type==='zset'" class="color-warning">{{ currentRedisKey.type }}</span>
        <span v-if="currentRedisKey.type==='none'" class="color-default">{{ currentRedisKey.type }}</span>
        键值：
        <copy-text :content="currentRedisKey.key" position="left" />
      </div>
      <div class="table-container flex-main">
        <template v-if="currentRedisKey.type==='string'">
          <div style="height:100%;overflow:auto">
            <json-viewer
              :value="currentRedisKey.values!=null ? currentRedisKey.values:{} "
              :expand-depth="5"
              copyable
              sort />
          </div>
        </template>
        <template v-if="currentRedisKey.type==='hash'">
          <el-table
            ref="multipleTable"
            :data="tableList"
            header-cell-class-name="table-header"
            fit
            highlight-current-row
            stripe
            height="100%">
            <el-table-column align="center" prop="row" label="#" width="60">
              <template slot-scope="scope">{{ scope.$index+1 }}</template>
            </el-table-column>
            <el-table-column label="key" prop="key" width="300" sortable :show-overflow-tooltip="true" align="left">
              <template slot-scope="scope">
                <span class="color-primary common-cursor" @click="handleLook(scope.row)">{{ scope.row.key }}</span>
              </template>
            </el-table-column>
            <el-table-column label="value" prop="value" sortable min-width="200" align="left" :show-overflow-tooltip="true" />
          </el-table>
        </template>
        <template v-if="currentRedisKey.type==='list'">
          1
        </template>
        <template v-if="currentRedisKey.type==='set'">
          1
        </template>
        <template v-if="currentRedisKey.type==='zset'">
          1
        </template>
      </div>
    </div>
    <div v-if="!currentRedisKey.key" class="conmmon-container-main flex-main" style="background-color: #fff;text-align: center;padding-top: 15%;font-weight: bold;">
      请先选择一个键值
    </div>
    <model-dialog
      :title="currentRedisValue.path"
      :visible.sync="currentRedisValueDialogVisible"
      width="600px"
      @close="currentRedisValueDialogVisible=!currentRedisValueDialogVisible">

      <div>Key:{{ currentRedisValue.key }}</div>
      <div>Value:</div>
      <json-viewer
        :value="currentRedisValue.value!=null ? currentRedisValue.value:{} "
        :expand-depth="2"
        copyable
        sort />
    </model-dialog>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'

export default {
  components: { JsonViewer },
  data() {
    return {
      defaultTreeProps: {
        children: 'children',
        label: 'key'
      },
      redisKeys: [],
      searchValue: '',
      treeLoading: false,
      currentRedisKey: {},
      tableList: [],
      currentRedisValue: {
        path: ''
      },
      currentRedisValueDialogVisible: false
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.keyTree.filter(val)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /* 节点过滤函数 */
    onTreeFilter(value, data) {
      if (!value) return true
      return data[this.defaultTreeProps.filter] ? data[this.defaultTreeProps.label].indexOf(value) !== -1 || data[this.defaultTreeProps.filter].indexOf(value.toUpperCase()) !== -1 : data[this.defaultTreeProps.label].indexOf(value) !== -1
    },
    fetchData() {
      this.$store.dispatch('redisKeys').then((res) => {
        this.redisKeys = res
      })
    },
    handleNodeClick(data, node) {
      if (data.key === 'REGIONS') {
        this.$modal.msgWarning('由于数据比较多，禁止查看该接待数据')
        return
      }
      if (!data.children) {
        this.$store.dispatch('redisValues', data.path).then((res) => {
          console.log(res)

          this.currentRedisKey = {
            type: data.type,
            key: data.path,
            values: res
          }
          if (data.type === 'hash') {
            this.tableList = []
            for (var item in res) {
              console.log(item, res[item])
              this.tableList.push({
                key: item,
                value: JSON.stringify(res[item])
              })
            }
          }
        }).catch((_) => {})
      }
    },
    handleLook(row) {
      this.currentRedisValue = {
        key: row.key,
        value: JSON.parse(row.value),
        path: this.currentRedisKey.key
      }
      this.currentRedisValueDialogVisible = true
      console.log(this.currentRedisValue)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
